<template>
  <div>
    <h1>插槽的使用</h1>
    在我们封装组件的时候.如果组件内部的Dom元素是需要父级传递进来的
    就可以在子组件中使用一个插槽,作为占位符,来展示对应传递尽量的内容,分为:
    <div><span class="myred">匿名插槽,子组件的slot标签没有名字,
        父组件调用的时候传递进去的dom没名字的.就展示在子组件的slot标签上</span>
    </div>
    <div><span class="myred">具名插槽,内容的展示位置,可以被控制,
        子组件的slot标签的name名字和父组件的DOM元素的slot属性值一样,template中可以简写成#</span>
    </div>
    <div><span class="myred">作用域插槽稍微麻烦一些,作用域插槽就是
        你可以给插槽标签传递属性.在父作用域中通过v-slot:得到的是
        一个属性的对象集合,这样我们就能够让父级的插槽内容访问子组件中才有的数据
        :子组件通过slot渲染出来的内容,数据受到子组件控制,但是结构
        是在父组件组装的</span>
    </div>
    <SlotView>
      <!-- 作用域插槽 -->
      <template #headerTop="{ likeSports }">
        <!-- {{ scope }} -->
        <h1 v-for="item in likeSports">{{ item.name }}</h1>
      </template>
      <!-- 匿名插槽 -->
      <h1>我是Home页面一个插槽内容</h1>
      <h1>我是Home页面一个插槽内容</h1>
      <!-- 具名插槽 -->
      <!-- <template #name1> -->
      <template v-slot:name1>
        <h2>我是具名插槽内容1</h2>
      </template>
      <h2 slot="name2">我是具名插槽内容2</h2>
    </SlotView>
  </div>
</template>

<script>
import SlotView from "./SlotView.vue";

export default {
  components: { SlotView },
  props: {},
  data () {
    return {

    }
  },
  computed: {},
  methods: {

  },
  created () {

  },
  mounted () {

  },
}
</script>
<style scoped></style>
